<template>
  <div class="resource-content">
    <transform @add="addPair" />
    <resourceTable @edit="handleEdit" />

    <a-modal
      v-model:visible="pairVisible"
      wrap-class-name="primary-modal"
      width="888px"
      :title="isAdd ? 'Add Resource：Chinese(Simplified,China)-> English(United States)' : 'Edit Info'"
      @cancel="handleCancel">
      <a-form ref="formRef" layout="vertical" :model="formState" :rules="rules">
        <div class="m-title">Type</div>
        <a-form-item name="type">
          <div v-if="isAdd" class="select-area">
            <a-radio-group v-model:value="formState.type" style="display: flex; width: 100%">
              <div class="radio-group" @click="formState.type = 1">
                <a-radio :value="1">Internal</a-radio>
              </div>
              <div class="radio-group" @click="formState.type = 2">
                <a-radio :value="2">External</a-radio>
              </div>
            </a-radio-group>
          </div>
          <a-select
            v-if="!isAdd"
            v-model:value="formState.type"
            :disabled="!isAdd"
            style="width: 360px !important"
            placeholder="Please select">
            <a-select-option :value="1">Internal</a-select-option>
            <a-select-option :value="2">External</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="name" label="Name">
          <a-select
            v-model:value="formState.name"
            :disabled="!isAdd"
            style="width: 360px !important"
            placeholder="Please select">
            <a-select-option value="0">Outer6208</a-select-option>
            <a-select-option value="1">Outer11155</a-select-option>
          </a-select>
        </a-form-item>
        <div class="m-title">Tags</div>
        <a-form-item name="tags">
          <div class="check-area">
            <a-checkbox-group v-model:value="formState.tags" @change="boxChange">
              <div class="checkbox" :class="formState.tags.includes('Translator') ? 'checked' : ''">
                <a-checkbox style="width: 100%; height: 100%" value="Translator">Translator</a-checkbox>
              </div>
              <div class="checkbox" :class="formState.tags.includes('Primary') ? 'checked' : ''">
                <a-checkbox style="width: 100%; height: 100%" value="Primary">Primary</a-checkbox>
              </div>
              <div class="checkbox" :class="formState.tags.includes('TEP') ? 'checked' : ''">
                <a-checkbox style="width: 100%; height: 100%" value="TEP">TEP</a-checkbox>
              </div>
              <div class="checkbox" :class="formState.tags.includes('Editor') ? 'checked' : ''">
                <a-checkbox style="width: 100%; height: 100%" value="Editor">Editor</a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </a-form-item>
        <a-form-item name="comment" label="Comment (Optional)">
          <a-textarea v-model:value="formState.comment" style="height: 80px" autocomplete="off"></a-textarea>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="handleCancel">Cancel</a-button>
        <a-button key="submit" type="primary" @click="handleSave">Save</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import resourceTable from './resourceTable.vue'
import transform from './transform.vue'

const pairVisible = ref(false)
const formRef = ref()
const formState = reactive({
  type: 1,
  name: undefined,
  tags: [],
  comment: ''
})
const rules = {
  name: [
    {
      required: true,
      message: 'Please select Name',
      trigger: 'blur'
    }
  ],
  comment: [
    {
      required: true,
      message: 'Please input Comment',
      trigger: 'blur'
    }
  ]
}
const isAdd = ref(true)
/**
 * Add Resource
 */
const addPair = () => {
  isAdd.value = true
  pairVisible.value = true
}
/**
 * Edit Resource
 * @param record
 */
const handleEdit = record => {
  isAdd.value = false
  pairVisible.value = true
  formState.type = record.type
  formState.comment = record.comment
  formState.tags = record.tags
  formState.name = record.nameId
}
/**
 * 保存
 */
const handleSave = () => {
  formRef.value
    .validate()
    .then(() => {
      if (isAdd.value) {
        alert('Add')
      } else {
        alert('Edit')
      }
      handleCancel()
    })
    .catch(() => {})
}
/**
 * 取消模态框
 */
const handleCancel = () => {
  pairVisible.value = false
  formRef.value.resetFields()
  formState.type = 1
  formState.name = undefined
  formState.tags = []
  formState.comment = ''
}
/**
 * 多选框变化
 * @param val
 */
const boxChange = val => {
  console.log(val)
}
</script>

<style scoped lang="less">
.resource-content {
  margin-top: 24px;
  padding-top: 24px;
  width: 100%;
  border-top: 1px solid @lighter-gray;
}
.m-title {
  color: @deep-gray;
  font-size: 14px;
  margin-bottom: 8px;
}
.select-area {
  width: 360px;
  height: 32px;
  border: 1px solid @border-color;
  display: flex;
  border-radius: 2px;
  .radio-group {
    flex: 1;
    display: flex;
    padding-left: 12px;
    cursor: pointer;
    &:first-child {
      border-right: 1px solid @border-color;
    }
  }
}
.check-area {
  display: flex;
  .checkbox {
    display: inline-block;
    border: 1px solid @gray;
    border-radius: 2px;
    padding: 4px 12px;
    user-select: none;
    cursor: pointer;
    width: 180px;
    height: 32px;
    margin-right: 12px;
    &:hover,
    &.checked {
      border-color: @primary-color;
      box-shadow: 0 2px 6px rgba(60, 108, 254, 0.3);
    }
  }
}
</style>
